<template>
  <div class="PayslipHistory">
    <a-row v-for="(item, i) in dataSource" :key="i" class="content" type="flex" align="middle">
      <a-col :span="4">
        <a-row class="ove">
          <strong>{{ item.sendName }}</strong>
        </a-row>
        <a-row class="sub_tit mg_t12 ove">
          <span> {{ item.sendBy }}</span>
          <a-tooltip placement="top" class="mg_l20 mg_r20">
            <template slot="title">
              <span class="mg_l2 ">发放于 {{ formatDate(item.sendTime) }}</span>
            </template>
            <span class="mg_l2 ">发放于 {{ formatDate(item.sendTime) }}</span>
          </a-tooltip>
        </a-row>
      </a-col>
      <a-divider type="vertical" style="height:66px" />
      <a-col :span="4">
        <a-row class="sub_tit mg_b12">已发放</a-row>
        <a-row
          ><strong> {{ item.sendCount }}人</strong></a-row
        >
      </a-col>

      <a-col :span="4">
        <a-row class="sub_tit mg_b12">已确认</a-row>
        <a-row
          ><strong>{{ item.checkCount }}人</strong></a-row
        >
      </a-col>
      <a-col :span="4">
        <a-row class="sub_tit mg_b12">反馈意见</a-row>
        <a-row
          ><strong> {{ item.feedbackCount }}人</strong></a-row
        >
      </a-col>
      <a-col :span="4">
        <a-row class="sub_tit mg_b12">已撤回</a-row>
        <a-row
          ><strong>{{ item.withdrawnCount }}人</strong></a-row
        >
      </a-col>
      <a-col class="full">
        <a-row type="flex" justify="center" align="middle">
          <a-col class="primary" @click="goDetail(item.id)">查看详情</a-col>
          <!-- <a-divider type="vertical" />
          <a-col style="cursor:pointer"><strong>撤回工资条</strong></a-col> -->
        </a-row>
      </a-col>
    </a-row>
  </div>
</template>

<script>
import { mapState, mapGetters } from "vuex";

export default {
  name: "PayslipHistory",

  data() {
    return {
      params: {
        name: "",
        dep: ""
      },
      pagination: {
        current: 1,
        pagesize: 10,
        total: 0
      },
      dataSource: []
    };
  },
  computed: {
    ...mapState(["hr"]),
    ...mapGetters({ PAYSLIP: "wages/PAYSLIP" })
  },

  created() {
    this.getList();
  },

  methods: {
    // 查看详情
    // this.PAYSLIP.tableId
    getList() {
      this.$request({
        url: "/hr/api/v1/salaryBillSends/salaryBillSendListPage",
        params: {
          companyId: this.hr.companyId,
          tableId: this.PAYSLIP.tableId,
          pagesize: 10,
          sendType: 1
        }
      }).then(({ data }) => {
        this.dataSource = data.entities || [];
        this.pagination.total = data.entityCount || 0;
      });
    },
    goDetail(id) {
      this.$router.push({
        path: "payslip-excel-detail",
        query: {
          id
        }
      });
    }
  }
};
</script>
<style lang="scss" scoped>
.PayslipHistory {
  margin-top: 12px;
  .content {
    margin-bottom: 24px;
    padding: 24px;
    border: 1px solid #ccc;
    border-radius: 4px;
    text-align: center;
  }
}
</style>
